<template>
	<view class="list">
		<view class="fixbg" :style="{'background-image':'url('+playList.coverImgUrl+')'}"></view>
		<musicHead :icon='true' title='歌单' color='#fff'/>
		<view class="container" v-show="!isLoading">
			<scroll-view class="scroll" scroll-y="true">
				<view class="list-head">
					<view class="list-head-img">
						<image :src='playList.coverImgUrl'></image>
						<text class="iconfont icon-yousanjiao">{{playList.playCount | formatCount}}</text>
					</view>
					<view class="list-head-text">
						<view>云音乐{{playList.name}}</view>
						<view>
							<image :src='playList.creator.avatarUrl'></image>
							{{playList.creator.nickname}}
						</view>
						<view>{{playList.description}}</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button class='list-share' open-type="share">
					<text class="iconfont icon-fenxiang"></text>分享给微信好友
				</button>
				<!-- #endif -->
				<view class="list-music">
					<view class="list-music-head">
						<text class="iconfont icon-bofang"></text>
						<text>播放全部</text>
						<text>(共{{playList.trackCount}}首)</text>
					</view>
					<view class="list-music-item" 
						v-for="(item,index) in playList.tracks" 
						:key='index'
						@click="handleToDetail(item.id)"
					>
						<view class="list-music-top">{{index + 1}}</view>
						<view class="list-music-song">
							<view class="ellipsis">{{item.name}}</view>
							<view class="ellipsis">
								<image v-if='privileges[index].flag > 60 && privileges[index].flag < 70' src='../../static/logo.png'></image>
								<image v-if='privileges[index].maxbr === 999000' src='../../static/logo.png'></image>
								<view>{{item.ar[0].name}} - {{item.name}}</view>
							</view>
						</view>
						<text class="iconfont icon-bofang"></text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import '@/common/iconfont.css';
	import {_getList} from '../../common/api.js';
	import musicHead from '../../components/musicHead/index.vue';
	export default {
		data() {
			return {
				listId:'',
				playList: {
					creator:{
						avatarUrl:''
					}
				},
				privileges: [],
				isLoading: true
			}
		},
		components:{
			musicHead
		},
		onLoad(options) {
			// console.log(options)
			this.getList(options.listId)
		},
		methods: {
			async getList(listId) {
				let res = await _getList(listId);
				console.log(res);
				if(res.data.code === 200) {
					this.playList = res.data.playlist;
					this.privileges = res.data.privileges;
					this.$store.commit('INIT_TOPLISTIDS',res.data.playlist.trackIds)
					this.isLoading = false;
				}
			},
			handleToDetail(id) {
				uni.navigateTo({
					url:`/pages/detail/index?id=${id}`
					// url:`/pages/detail/index?id=48393775`
				})
			}
		}
	}
</script>

<style scoped>
	.list-head{display: flex;margin: 30upx;}
	.list-head-img{width: 264upx;height:264upx;border-radius: 30upx;overflow: hidden;position: relative;margin-right:20upx;}
	.list-head-img image{width: 100%;height: 100%;}
	.list-head-img text{position: absolute;right: 8upx;top: 8upx;color: #fff;font-size: 26upx;}
	.list-head-text{flex:1;color:#f0f2f7;}
	.list-head-text view:nth-child(1){}
	.list-head-text view:nth-child(2){display: flex;margin:20upx 0;font-size: 24upx;align-items: center;}
	.list-head-text view:nth-child(2) image{width: 54upx;height: 54upx;border-radius: 50%;margin-right: 14upx;}
	.list-head-text view:nth-child(3){line-height: 34upx;font-size: 22upx;}
	.list-share{width: 330upx;height: 74upx;margin:0 auto;background-color: rgba(0,0,0,.4);border-radius: 17upx;color:#fff;text-align: center;line-height: 74upx;font-size: 28upx;}
	.list-share text{}
	
	.list-music{background-color: #fff;border-radius: 50upx;margin-top:40upx;overflow:hidden;}
	.list-music-head{height:50upx;margin:30upx 0 70upx 22upx;}
	.list-music-head text:nth-child(1){height:50upx;font-size: 35upx;}
	.list-music-head text:nth-child(2){font-size: 30upx;margin: 0 10upx 0 26upx;}
	.list-music-head text:nth-child(3){font-size: 26upx;color:#b2b2b2;}
	.list-music-item{display:flex; margin:0 32upx 66upx 46upx;align-items: center;color:#959595;}
	.list-music-top{width: 58upx;font-size: 30upx;}
	.list-music-song{flex:1;overflow: hidden;}
	.list-music-song view:nth-child(1){font-size: 28upx;color:#000;}
	.list-music-song view:nth-child(2){font-size: 20upx;align-items: center;margin-right:10upx;}
	.list-music-song view:nth-child(2) image{width: 32upx;height:20upx;margin-right:10upx;}
	.list-music-item text{font-size: 50upx;color:#c7c7c7;}
	/*显示省略号*/
	.ellipsis{
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	}
</style>
